<template>
  <div id="mainportal" class="container" style="background-color: #f5f5f5;">

  <comhead title="申请退款" isLeftIcon="true" leftIconName="angle-left" @leftClick="foBack()" isRightIcon="true" rightIconName="ellipsis-h" @rightClick="updataActive()"></comhead>
  <div class="page__hd" style='border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;'>
    <div class='session2'>
      <div style=''>
        退款金额
      </div>
      <div style='flex:1;padding:10px 0 10px 10px;border-bottom: solid 1px #e5e5e5;display: flex;align-items: flex-end;font-size:18px;'>
      <div style='line-height:36px'>￥</div>
        <input maxlength="11" type='digit' style='font-size:30px;height:auto' placeholder="0" bindinput='changeInputMoney' v-model="money" accept="image/*"/>
      </div>
    </div>
        <div style='background-color:#fff;padding:0 20px;font-size:16px;' class='weui-uploader__title'>
        退款原因
      </div>

<div style='padding:10px 20px 20px ;background-color:#fff;display:flex;'>
     <textarea maxlength="120" placeholder="退款原因" bindinput='changeInputReason' v-model="reason"  style='width:100%;background-color:#f5f5f5;font-size:14px;padding:5px 10px;height:4em;border: solid 1px #e5e5e5;border-radius: 3px;' />
</div>


  </div>
    <input type="file" ref="logo" multiple style="display:none;" @change="isSizeClear();" />

<div class="backIndex">
    
    <div >
<div style="display:flex;padding-bottom:10px;justify-content: space-between;
align-items:center;">
        <div>图片上传</div>
        <div>{{files.length}}/9 张</div>
</div>
<div style="display:flex;    flex-wrap: wrap;">



<div @click="imageModel = true" v-for="(item,index) in files" style="
position:relative;    
margin-right:9px;
margin-bottom:9px;
width:77px;
    height: 77px;
border:1px solid #e5e5e5;
" >
<div style=" overflow: hidden;height:100%;width:100%;display: flex;align-items: center;">
<img :src="item" style="width:100%;"/>
</div>
           <div style='z-index:999;padding:6px 10px;position:absolute;top:-15px; right:-17px;' @click='delFileItem(index)' >
                              <i class="iconfont icon-shanchu" style="color:#cc0000;background-color:#fff;height:18px;border-radius:25px;font-size:19px"></i>
                    </div>
</div>


<div v-if="files.length<9" style="
position:relative;
margin-right:9px;
margin-bottom:9px;
width:77px;
height:77px;
border:1px solid #d9d9d9;
"  @click="$refs.logo.click()">
<div style="position:absolute;
z-index:1;
top:0;
left:0;
width:100%;
height:100%;
font-size:20px;color:#999;
display:flex;    align-items: center;
    justify-content: center;
">
<div>+</div>
</div>
</div>




</div>

    </div>






</div>
<!--   
  <div class="page__bd">
    <div class="weui-cells">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <div class="weui-uploader">
            <div class="weui-uploader__hd">
              <div class="weui-uploader__title">图片上传</div>
              <div class="weui-uploader__info" style='font-size:14px;'>{{files.length}}/9 张</div>
            </div>
            <div class="weui-uploader__bd" style='overflow:initial;'>
              <div class="weui-uploader__files"  id="uploaderFiles">
                <block wx:for="{{files}}" wx:key="*this" >
                  <div class="weui-uploader__file" style='margin-right:20px;margin-bottom:20px;position: relative' bindtap="predivImage" id="{{item.filename}}">
                    <image class="weui-uploader__img"  src="{{item.filename}}" mode="aspectFill" />
                             <div style='z-index:999;padding:12rpx 10px;position:absolute;top:-30rpx; right:-35rpx;' catchtap='delFileItem' data-itemindex='{{index}}'>
                              <i class="iconfont icon-shanchu" style="color:#cc0000;background-color:#fff;height:18px;border-radius:25px;font-size:38rpx"></i>
                    </div>
                    <div class="weui-uploader__img" wx:if="{{item.progress!=100}}" style='background-color:rgba(0, 0, 0, 0.498039);position:absolute;top:0;   display: flex;align-items: center;justify-content: center;color: #fff;' >
                      <div class="">{{item.progress}}%</div>

                    </div>
                  </div>
                </block>



              </div>
              <div class="weui-uploader__input-box" wx:if="{{files.length!==9}}">
                <div class="weui-uploader__input" bindtap="chooseImage" >
          </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div> -->

  <div style='padding: 25px 20px;'>
    <button class='sign' :style="'background-color:'+$store.getters.getMerchant.themeColors"   style="    width: 100%;
    border: 1px; border-radius: 5px;  font-size: 14px;color:#fff;padding:5px 0" @click='doRefund'>
      申请退款
    </button>
  </div>



<div v-if="imageModel" style="height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #000;
    z-index: 2001;"  @click="imageModel = false">
<mt-swipe :auto="4000" style="width:100%;" >
  <mt-swipe-item v-for="item in files">
    <div  style="display: flex;
    align-items: center;height:100%;width:100%;">
    <img :src='item' style='width:100%;  '/>
    </div>
    </mt-swipe-item>
    
</mt-swipe>
</div>




  </div>
</template>

 
 

<script>
import { Toast, Swipe, SwipeItem, Switch, MessageBox } from "mint-ui";
import { Indicator } from "mint-ui";
import { Tabbar, TabItem } from "mint-ui";
import { TabContainer, TabContainerItem } from "mint-ui";
import comhead from "../../common/coffee/Comhead";

export default {
  data() {
    return {
      imageModel: false,
      files: [],
      orderId: "",
      orderinfo: [],
      money: "",
      reason: "",
      isModeRefund: false,
      progress: 0,
      index: 0,
      paytotal: 0
    };
  },
  computed: {},

  methods: {
    removeByValue(arr, val) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] == val) {
          arr.splice(i, 1);
          break;
        }
      }
    },
    delFileItem(index) {
      let self = this;
      MessageBox.confirm("是否删除此张图片?").then(action => {
        if (action) {
          self.removeByValue(self.files, self.files[index]);
        }
      });
    },
    isSizeClear() {
      if (this.$refs.logo.files.length + this.files.length > 9) {
        MessageBox.alert("最多上传9张图片");
        return;
      }
      Indicator.open({
        text: "上传中...",
        spinnerType: "fading-circle"
      });
      const self = this;
      let form = new FormData();
      let logo = this.$refs.logo.files;
      for (let n in logo) {
        let k = parseInt(n) + 1;
        form.append("file" + k, logo[n]);
      }

      let url = this.$baseUrl.bizUrl + "/multiupload";

      let callBack = res => {
        Indicator.close();

        if (res == null) {
          console.log("网络请求错误1！");
          return;
        }

        if (res.data.status != 200) {
          MessageBox.alert(res.data.message);
          return;
        }

        if (res.data.status == 200) {
          res.data.data.urllist.forEach((item, index) => {
            this.files.unshift(item);
          });
        }
      };
      this.$reqFormUpload(url, form, callBack);
    },
    doRefund() {
      if (this.money > this.paytotal) {
        MessageBox.alert("退款金额不可以大于订单金额");
        return;
      }

      let url = this.$baseUrl.bizUrl + "/order/refund/apply";
      if (this.isModeRefund) {
        url = this.$baseUrl.bizUrl + "/order/refund/reapply";
      }
      //   let filesList = [];
      //   this.files.forEach((item, index) => {
      //     filesList.push(item.filename);
      //   });
      // this.files.join(",")
      let data = {
        token: this.$store.getters.getLoginStatus.token,
        userId: this.$store.getters.getLoginStatus.userId,
        money: this.money,
        orderId: this.orderId,
        refundImgs: this.files.join(","),
        reason: this.reason
      };
      let callBack = res => {
        console.log("申请退款", res);

        if (res == null) {
          console.log("网络请求错误1！");
          return;
        }

        if (res.data.status != 200) {
          MessageBox.alert(res.data.message);
          return;
        }

        if (res.data.status == 200) {
          Toast({
            message: "申请成功"
          });
          this.$router.go(-1);
        }
      };
      this.$reqFormPost(url, data, callBack);
    },
    goSign() {
      this.$router.push({ name: "sign" });
    },
    foBack() {
      this.$router.go(-1);
    },
    getOrderInfo(orderid) {
      let self = this;
      let url = this.$baseUrl.bizUrl + "/order/queryorderdetail";
      let data = {
        token: this.$store.getters.getLoginStatus.token,
        userId: this.$store.getters.getLoginStatus.userId,
        orderId: orderid
      };
      let callBack = res => {
        if (res == null) {
          console.log("网络请求错误！");
          return;
        }
        if (res.data.status != 200) {
          console.log("请求数据错误" + url);
          return;
        }
        if (res.data.status === 200) {
          this.orderinfo = res.data.data;

          if (res.data.data.refundOrder) {
            this.money = res.data.data.refundOrder.refundAmount;
            this.reason = res.data.data.refundOrder.refundReason;
            this.isModeRefund = true;
          }
        }
      };
      this.$reqFormPost(url, data, callBack);
    }
  },
  mounted() {
    document.title = '申请退款'
    this.orderId = this.$route.query.orderid;
    this.paytotal = this.$route.query.paytotal;

    this.getOrderInfo(this.$route.query.orderid);
  },
  components: {
    Tabbar,
    TabItem,
    TabContainer,
    TabContainerItem,
    comhead,
    Swipe,
    SwipeItem
  }
};
</script>
<style>
.container {
  height: 100vh;
  width: 100%;
}
.session2 {
  font-size: 16px;
  background-color: #fff;
  padding: 10px 20px;
}
.weui-cell {
  padding: 10px 20px;
}
sign {
}
sign:active {
  opacity: 0.5;
}
.backIndex {
  font-size: 14px;
  margin: 20px 0;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  padding: 0 20px;
  background-color: #fff;
}
</style>



<!-- Add "scoped" attribute to limit CSS to this component only -->
